<script setup lang="ts">
import Button from "../../components/Button.vue";
import RightList from "../../components/RightList.vue";
import { ref, inject, onMounted, computed } from "vue";
import { XbsjEarthUi } from "../../scripts/xbsjEarthUi";
import { defineAsyncComponent, shallowRef } from "vue";
import { createSceneObjTreeItemFromJson } from "./esObj/fun";
import { getsceneObjNumfromSceneTree } from "../../scripts/general";

const xbsjEarthUi = inject("xbsjEarthUi") as XbsjEarthUi;
const objType = ref<string>("");
const largeScreen = ref(true);

onMounted(() => {
  if ((window as any).ue && (window as any).ue.es) {
    largeScreen.value = false;
  }

  // 清空场景树
  const sceneTree = xbsjEarthUi.getSceneTree();
  if (sceneTree) {
    sceneTree.json.root.children = [];
  }
});

//Cesium基础按钮
const cesiumBasicObjectList: {
  type: string;
  zh: string;
  icon: string;
  leftButton: boolean;
  com: any;
}[] = [
  {
    type: "viewerInit",
    zh: "Viewer",
    icon: "yuan",
    leftButton: true,
    com: shallowRef(
      defineAsyncComponent(() => {
        return import("./esObj/chapter1/ViewerInit.vue");
      })
    ),
  },
  {
    type: "sceneInit",
    zh: "Scene",
    icon: "yuan",
    leftButton: true,
    com: shallowRef(
      defineAsyncComponent(() => {
        return import("./esObj/chapter1/SceneInit.vue");
      })
    ),
  },
  {
    type: "entityInit",
    zh: "Entity",
    icon: "yuan",
    leftButton: true,
    com: shallowRef(
      defineAsyncComponent(() => {
        return import("./esObj/chapter1/EntityInit.vue");
      })
    ),
  },
];

//Cesium数据管理与查询按钮
const cesiumDataManagementList: {
  type: string;
  zh: string;
  icon: string;
  leftButton: boolean;
  com: any;
}[] = [
  {
    type: "primitiveBasic",
    zh: "Primitive基础",
    icon: "yuan",
    leftButton: true,
    com: shallowRef(
      defineAsyncComponent(() => {
        return import("./esObj/chapter2/PrimitiveBasic.vue");
      })
    ),
  },
  {
    type: "primitiveMerge",
    zh: "Primitive合并",
    icon: "yuan",
    leftButton: true,
    com: shallowRef(
      defineAsyncComponent(() => {
        return import("./esObj/chapter2/PrimitiveMerge.vue");
      })
    ),
  },
  {
    type: "primitivePick",
    zh: "Primitive选取",
    icon: "yuan",
    leftButton: true,
    com: shallowRef(
      defineAsyncComponent(() => {
        return import("./esObj/chapter2/PrimitivePick.vue");
      })
    ),
  },
  {
    type: "entityBasic",
    zh: "Entity基础",
    icon: "yuan",
    leftButton: true,
    com: shallowRef(
      defineAsyncComponent(() => {
        return import("./esObj/chapter2/EntityBasic.vue");
      })
    ),
  },
  {
    type: "entityMaterial",
    zh: "Entity材质",
    icon: "yuan",
    leftButton: true,
    com: shallowRef(
      defineAsyncComponent(() => {
        return import("./esObj/chapter2/EntityMaterial.vue");
      })
    ),
  },
  {
    type: "entityQuery",
    zh: "Entity查询",
    icon: "yuan",
    leftButton: true,
    com: shallowRef(
      defineAsyncComponent(() => {
        return import("./esObj/chapter2/EntityQuery.vue");
      })
    ),
  },
];

//Cesium数据加载按钮
const cesiumDataLoadingList: {
  type: string;
  zh: string;
  icon: string;
  leftButton: boolean;
  com: any;
}[] = [
  {
    type: "terrainLoader",
    zh: "地形加载",
    icon: "yuan",
    leftButton: true,
    com: shallowRef(
      defineAsyncComponent(() => {
        return import("./esObj/chapter3/TerrainLoader.vue");
      })
    ),
  },
  {
    type: "imageryLoader",
    zh: "影像加载",
    icon: "yuan",
    leftButton: true,
    com: shallowRef(
      defineAsyncComponent(() => {
        return import("./esObj/chapter3/ImageryLoader.vue");
      })
    ),
  },
  {
    type: "spatialDataLoader",
    zh: "空间数据",
    icon: "yuan",
    leftButton: true,
    com: shallowRef(
      defineAsyncComponent(() => {
        return import("./esObj/chapter3/SpatialDataLoader.vue");
      })
    ),
  },
];

const cesiumBasicCom = computed(() => {
  return cesiumBasicObjectList.find((item) => item.type === objType.value)?.com
    .value;
});

const cesiumDataManagementCom = computed(() => {
  return cesiumDataManagementList.find((item) => item.type === objType.value)
    ?.com.value;
});

const cesiumDataLoadingCom = computed(() => {
  return cesiumDataLoadingList.find((item) => item.type === objType.value)?.com
    .value;
});
</script>

<template>
  <!-- Cesium容器 -->
  <div id="customCesiumContainer" class="custom-cesium-container"></div>

  <RightList :title="'1.Cesium基础'" :isTop="true">
    <Button
      v-for="item in cesiumBasicObjectList"
      :key="item.type"
      :name="item.icon"
      :content="item.zh"
      :click="
        () => {
          objType === item.type ? (objType = '') : (objType = item.type);
        }
      "
      :actived="objType === item.type"
      :left-button="item.leftButton"
    ></Button>
    <component :is="cesiumBasicCom" @close="objType = ''"></component>
  </RightList>

  <RightList :title="'2.空间数据管理与查询'" :isTop="false">
    <Button
      v-for="item in cesiumDataManagementList"
      :key="item.type"
      :name="item.icon"
      :content="item.zh"
      :click="
        () => {
          objType === item.type ? (objType = '') : (objType = item.type);
        }
      "
      :actived="objType === item.type"
      :left-button="item.leftButton"
    ></Button>
    <component :is="cesiumDataManagementCom" @close="objType = ''"></component>
  </RightList>

  <RightList :title="'3.Cesium数据加载'" :isTop="false">
    <Button
      v-for="item in cesiumDataLoadingList"
      :key="item.type"
      :name="item.icon"
      :content="item.zh"
      :click="
        () => {
          objType === item.type ? (objType = '') : (objType = item.type);
        }
      "
      :actived="objType === item.type"
      :left-button="item.leftButton"
    ></Button>
    <component :is="cesiumDataLoadingCom" @close="objType = ''"></component>
  </RightList>
</template>

<style scoped>
.custom-cesium-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: none; /* 默认隐藏 */
}

.custom-cesium-container.active {
  display: block; /* 激活时显示 */
}
::v-deep .right_button > .right_button_content {
  font-size: 12px;
}
</style>
